<template>
  <a-spin :spinning="loading">
    <a-form-model :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }" :rules="rules" ref="formRef">
      <a-form-model-item label="品名" prop="materialName">
        <HfMaterialSearchSelectTag
          v-model="form.materialName"
          :dataUrl="url.materialList"
          @change="onMaterialChange(arguments)"
        ></HfMaterialSearchSelectTag>
      </a-form-model-item>
      <a-form-model-item label="品番" prop="saleCode">
        <a-input v-model:value="form.saleCode" disabled />
      </a-form-model-item>
      <a-form-model-item label="QAD" prop="qad">
        <a-input v-model:value="form.qad" disabled />
      </a-form-model-item>
      <a-form-model-item label="客户" prop="customId">
        <j-search-select-tag
          v-model:value="form.customId"
          dict="hf_custom,name,id"
          @change="onCustomChange(arguments)"
          placeholder="请选择客户"
          style="width: 100%"
        ></j-search-select-tag>
      </a-form-model-item>
      <a-form-item label="单箱数" prop="perNumber">
        <a-input-number v-model:value="form.perNumber" placeholder="请输入单箱数" style="width: 100%"></a-input-number>
      </a-form-item>
    </a-form-model>
    <a-space>
      <a-button type="primary" @click="onSubmit(true)">
        生成大标签（2*2）
      </a-button>
      <a-button type="primary" @click="onSubmit(false)">
        生成小标签（2*3）
      </a-button>
    </a-space>
  </a-spin>
</template>

<script>
import HfMaterialSearchSelectTag from '@comp/HfManual/HfMaterialSearchSelectTag.vue'
import { downloadFile, postAction } from '@api/manage'

export default {
  name: 'SingleCodePrint',
  components: {
    HfMaterialSearchSelectTag
  },
  data() {
    return {
      loading: false,
      form: {
        materialName: '',
        customId: ''
      },
      rules: {
        materialName: [
          {
            required: true,
            message: '请选择产品',
            trigger: 'blur'
          }
        ],
        customId: [
          {
            required: true,
            message: '请选择客户',
            trigger: 'change'
          }
        ]
      },
      url: {
        materialList: '/sale/hfSalePrice/codePrintList',
        generateOutboundPdfLarge: '/label/generateOutboundPdfLarge',
        generateOutboundPdfSmall: '/label/generateOutboundPdfSmall'
      }
    }
  },
  watch: {},
  methods: {
    onMaterialChange([, record]) {
      Object.assign(this.form, {
        materialCode: record.materialCode,
        materialName: record.materialName,
        perNumber: record.perNumber,
        customId: record.customId,
        qad: record.qad,
        customName: record.customId_dictText,
        saleCode: record.saleCode,
        saleCode1: record.saleCode1
      })
      if (!this.form.saleCode) {
        this.form.saleCode = record.sap
      }
    },
    onCustomChange([, record]) {
      this.form.customName = record
    },
    onSubmit(isBig) {
      this.loading = true
      if (
        this.form.materialName === '' ||
        this.form.materialName === null ||
        this.form.customId === '' ||
        this.form.customId === null
      ) {
        this.$message.error('请选择产品或客户！！！')
        this.loading = false
        return
      }
      const url = isBig ? this.url.generateOutboundPdfLarge : this.url.generateOutboundPdfSmall

      postAction(url, this.form, { timeout: 0 })
        .then(res => {
          if (res.success) {
            downloadFile(res.result.url, `${this.form.materialName}.pdf`)
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped></style>
